import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Material 2.12

//import Toou2D 1.0
Window {
    id: root
    visible: true
    width: 640
    height: 480

    Material.theme: Material.Light
    Material.accent: Material.BlueGrey

    //    Material.accent: Material.BlueGrey
    TabBar {
        id: bar
        width: parent.width
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 0
        TabButton {
            text: qsTr("Home")
        }
        TabButton {
            text: qsTr("Discover")
        }
        TabButton {
            text: qsTr("Activity")
        }
    }

    Column {
        id: leftColumn
        width: parent.width * 0.25
        anchors.left: parent.left
        anchors.leftMargin: 0
        anchors.top: bar.bottom
        spacing: 8

        Repeater {
            id: leftRep
            model: [{
                    "name": 'abolish',
                    "icon": 'qrc:/view/img/confussion.png'
                }, {
                    "name": 'test',
                    "icon": 'qrc:/view/img/emmm.png'
                }, {
                    "name": 'randolf',
                    "icon": 'qrc:/view/img/mask.png'
                }, {
                    "name": 'vivian',
                    "icon": 'qrc:/view/img/smile.png'
                }]
            // RoundButton
            delegate: Button {
                width: parent.width
                text: modelData.name
                icon: {
                    icon.source = modelData.icon
                }
            }
        }
    }

    Column {
        id: rightColumn
        width: parent.width * 0.6
        anchors.right: parent.right
        anchors.left: leftColumn.right

        anchors.top: bar.bottom

        Image {
            id: test_img
            source: 'qrc:/view/img/emmm.png'
        }
        DividerLine {
            anchors.horizontalCenter: parent.horizontalCenter
            color: "#dfdfdf"
            width: parent.width * 0.9
            height: 1
        }
    }
}
